<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出对话框-dialog</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<style>

* {margin:0; padding:0;}
/*
html {_overflow:hidden;}
body {_overflow:auto; _height: 100%;}
*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
#cover
{
	top:0;
	position:fixed;
	width: 100%;
	/*
	background:rgba(255, 255, 255, 0.5)!important;
	_filter:Alpha(opacity=80);
	*/
	z-index: 999;
	_position:absolute;
	_bottom:auto;
	_top:expression(eval(document.documentElement.scrollTop));
}
#iframe_cover {
	border: medium none; 
	top: 0; 
	z-index: 1;
	position:fixed;
	width: 100%;
	_filter:Alpha(opacity=50);
	background:rgba(255, 255, 255, 0.5)!important;
	_position:absolute;
	_bottom:auto;
	_top:expression(eval(document.documentElement.scrollTop));
}
 .boxBorder{
	background: #EBEBEB;
	height:100%;
	padding: 5px;
 }
 .boxContent{
	background:white;
	height:100%;
 }
 #title{
	cursor: move;
	line-height:25px;
	height:27px;
	background:#CCC;
	font-size:14px;
	font-weight:bold;
	color:#4C4C4C;
	text-shadow: 0 1px 1px #FFFFFF;
 }
 #title span{
	padding: 1px 5px;
 }
 #title input{
	height:22px;
 }
 #ablumInfo {
	margin-top: 8px;
	font-size:12px;
	width:100%; 
 }
 #ablumInfo td.l{
	width:62px;
	line-height:30px;
	text-align:right;
 }
  #ablumInfo td.r
 {
	padding-left: 15px;
 }
 td textarea{
	font-size:12px;
 }
 td em{
	line-height:30px;
	color:red;
 }
 td select{height: 22px;}
 .input_border{ border: 1px solid #E4E4E4; float:left;background-color:white;height:22px;}
 .input_border input{margin-top: 4px;border:0;}
 .textarea_border{border: 1px solid #E4E4E4; float:left;background-color:white;height:64px;}
 .textarea_border textarea{margin-top: 2px;margin-left: 2px;border:0;height:62px;}
 .button{text-align:center;margin-top: 15px;}
 .button input{
	background: -moz-linear-gradient(center top , #F4F3F4 0%, #DFDEDE 100%) repeat scroll 0 0 transparent;
    border: 1px solid #B4B4B4;
    color: #535353;
	height: 25px; width: 52px;
 }
 #content{margin:5px;}
</style>
<body>
	<div style="width:980px; height:200px; background:#CCC; margin:0 auto;">123123123123123123
		<select name="s">
			<option>相册名称</option>
			<option>相册权限</option>
			<option>相册权限</option>
			<option>相册权限</option>
			<option>相册权限</option>
		</select>
		213123123131
		<span><button class="alert">show alert</button></span>
	</div>
	<div style="width:980px; height:1000px; background:#CCC; margin:0 auto;"></div>
</body>
<script>
	var Drag = function(id,width,height,title)
		{
			this.id = id ? id : 'floatBox';
			this.width = width;
			this.height = height;
			this.title = title;			
			this.flag = false;

			this.init = function()
			{
				this.mkDrag();
				
				this.dMousedown('title');
			}

			this.mkDrag = function()
			{
				var cover = '<iframe id="iframe_cover" src="javascript:;" style="height:'+$(window).height()+'px;"></iframe>';
				var div_title = '<div id="title"><span style="float:left;">'+this.title+'</span><span style="float:right;"><input type="button" name="close" value="close"/></span></div>';
				var div_divBox = '<div id="content">'+this.content+'</div>'
				var div_button = '<div class="button"><input type="button" value="确定" style="margin-right: 5px;"/><input type="button" value="取消" style="margin-left: 5px;"/></div>'
				var div_boxContent = '<div class="boxContent">'+div_title+div_divBox+div_button+'</div>';
				var div_boxBorder = '<div class="boxBorder">'+div_boxContent+'</div>';
				var div_floatBox = '<div id="floatBox" style="width:'+this.width+'px;height:'+this.height+'px;position:absolute;">'+div_boxBorder+'</div>';
				var div_cover = '<div id = "cover">'+div_floatBox+'</div>';
				$('body').append(cover+div_cover);
				this.obj = $('#'+this.id);
				this.bPosition();
			}

			this.bPosition = function()
			{
				var H = $(window).height();
				var W = $(window).width();
				var bHeight = (H - this.height)/2;	
				var bWidth = (W - this.width)/2;
				
				$('#cover').height(H);
				$('#iframe_cover').height(H);
				$('#content').height(this.height - 80)
				this.obj.css({'top':bHeight,'left':bWidth});
			}

			this.dRemove = function()
			{
				$('input[name=close]').click(function(){
					$('#cover,#iframe_cover').detach();
				})
			}

			this.dMousedown = function(target)
			{
				$('#'+target).mousedown(function(event){
						var e	= event || window.event;				
						D.x		= e.pageX - D.obj.position().left;
						D.y		= e.pageY - D.obj.position().top;
						D.flag  = true;
					}
				)
			}
		}

		var D = new Drag('floatBox',600,220,'修改相册');
		
		$(window).resize(function(){
			D.bPosition();
		});

		$('.alert').click(function(){
			D.content = $('#table').html();
			D.init();
			D.dRemove();
		});

		$(document).bind({
		   mousemove : function(event){
				if(!D.flag){return false;}
				var e=event || window.event;				
				var X =  e.pageX - D.x;
				var Y =  e.pageY - D.y;
				D.obj.css({left:X,top:Y});										
			},
			mouseup : function(){
				D.flag = false;					
			}
		})
	</script>
	<script id="table">
		<table id="ablumInfo">
				<tr>
					<td class="l">相册名称</td>
					<td class="r"><div class="input_border"><input type="text" name="pbname" value="花儿蝴蝶"/></div><em>*(必填)</em></td>					
				</tr>
				<tr>
					<td class="l">相册权限</td>
					<td class="r">
						<select id="pright" name="pright">
							<option value="3">所有人可见</option>
							<option selected="selected" value="1">仅自己可见</option>
						</select>
					</td>					
				</tr>
				<tr>
					<td class="l" style="line-height:75px;">相册描述</td>
					<td class="r">
						<div class="textarea_border">
							<textarea name = "pbdisc" id ="pbdisc" cols="45" rows="3">描述，也就那么几十个字</textarea>
						</div>
					</td>					
				</tr>
			</table>
	</script>
</html>